{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block body %}
    {#{% include "ApiCloud/Base/inc.head.light.html.twig" with {title:"我的缓存",back:1} %}#}
    <div  id="header" style="" class="pos-r bcf">
        <div class="c11 tac fs12 flrc">
            {#{% if back == 1 %}#}
                <mu-button icon slot="left" @click="goback()">
                    <span class="fa fa-angle-left"></span>
                </mu-button>
            {#{% endif %}#}
            <div class="flex1 tal pad10 tac">我的缓存</div>

            <mu-button icon slot="left" @click="showManager()">
                <span class="fa fa-trash-o" :class="showDel?'c1':'c12'"></span>
            </mu-button>
        </div>
    </div>
    <div class="">
        <div class="mar10 pad30 fs12 c12 bdda round10 tac" v-if="!isTrue(dl)">
            暂无数据
        </div>
        <div class="mar10 shadow3 pad10 round5" v-for="data in dl">
            <div class="flrc">
                <div class="">
                    <div class="fs10 c12 pos-r wh10-10 round flcc bdso bc13" @click="del(data.info.id)" v-if="showDel">
                        <span class="fa fa-trash-o"></span><mu-ripple></mu-ripple>
                    </div>
                </div>
                <div class="flex1">
                    <div class="flrc padb20">
                        <div class="padr3"><span class="fs8 bc1 c13 padl3 padr3 padt3 padb1 round3">[[data.data.subject]]</span></div>
                        <div class="flex1 fs10">[[data.data.title]]</div>

                        <div class="fs12" :class="data.static.speed >0 ? 'c1':'c12'" v-if="data.static.status == 0">
                            <span class="fa fa-pause-circle-o"></span>
                        </div>
                        <div class="fs8 c1 pos-r" v-if="data.static.status == 1" @click="play(data.data.title,data.info.savePath)">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-play-circle fa-stack-1x fa-inverse"></i>
                    </span>
                            <mu-ripple></mu-ripple>
                        </div>
                    </div>
                    <div class="padb5">
                        <mu-linear-progress :value="data.static.finish" min="0" :max="data.static.total"
                                            mode="determinate" :color="c1"
                                            v-if="data.static.status == 0">
                        </mu-linear-progress>
                    </div>
                    <div class="flrc c12 fs8">
                        <div class="flex1" v-if="data.static.status == 0">下载进度 [[data.static.finish]] / [[data.static.total]] <span class="padl20"></span>[[data.static.speed]]M/S</div>
                        <div class="flex1" v-if="data.static.status == 1">已完成</div>
                        <div class="">[[data.static.total]]MB</div>
                    </div>
                </div>
            </div>

        </div>

    </div>

{% endblock %}

{% block myJs %}
    <script src="{{ root }}/js/0download.js{{ rnd }}"></script>
{% endblock %}